<!-- 护理项目信息 -->


<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getProjectList, projectAdd, getProjectDetails, projectUpdate, projectDelete, projectStatus } from '@/api/serve'

import TableList from './components/TableList.vue'
import SearchForm from './components/SearchForm.vue'
import DialogForm from './components/DialogForm.vue'
import Forbidden from '@/components/Forbidden/index.vue'
import OperateDialog from '@/components/OperateDialog/index.vue'


import { MessagePlugin } from "tdesign-vue-next";

var visible = ref(false)
const formRef = ref(null)
const title = ref('') // 弹窗标题
const formBaseData = ref({}) // 弹窗表单内容


//参数
const pagination = ref({
  pageNum: 1,
  pageSize: 10
})
const data = ref([]);
const total = ref(0);

const deleteVisible = ref(false) // 删除弹窗
const deleteData = ref({}) // 删除的护理项目

const forbiddenVisible = ref(false) // 禁用的弹窗
const forbiddenData = ref({}) // 禁用的护理项目

onMounted(() => {
  getList()
})

//调用接口返回数据
const getList = async () => {
  const res = await getProjectList(pagination.value)
  data.value = res.data.records;
  total.value = res.data.total
}

// 分页变动触发
const onChange = (pageInfo) => {
  pagination.value.pageNum = pageInfo.current
  pagination.value.pageSize = pageInfo.pageSize
  getList()
}

// 新增按钮
const handleBulid = () => {
  title.value = '新增'
  visible.value = true;
}

// 编辑按钮
const handleEdit = async (row) => {
  const res = await getProjectDetails(row.id)
  formBaseData.value = res.data
  title.value = '编辑'
  visible.value = true;
}

// 弹窗关闭按钮
const handleClose = () => {
  visible.value = false;
}

// 添加
const handleAdd = async (val) => {

  const res = await projectAdd(val)
  if (res.code === 200) {
    MessagePlugin.success('添加成功')
    getList()
    handleClose()
    formRef.value.handleClear()
  } else {
    MessagePlugin.error(res.msg)
  }
}

// 更新
const handleEditForm = async (val) => {
  const res = await projectUpdate(val)
  if (res.code === 200) {
    //提示，编辑成功
    MessagePlugin.success('编辑成功')
    getList()
    handleClose()
    formRef.value.handleClear()//调用子组件的方法，清理数据
  } else {
    MessagePlugin.error(res.msg);
  }
}

// 搜索
const handleSearch = () => {
  pagination.value.pageNum = 1
  getList()
}

// 重置
const handleReset = () => {
  pagination.value = {
    pageNum: 1,
    pageSize: 10
  }
  getList()
}

// 清空
const handleClear = (val) => {

  if (val === 'name') {
    delete pagination.value.name
  } else {
    delete pagination.value.status
  }
  getList()
}

const onConfirmDelete = async () => {

  const res = await projectDelete(deleteData.value.id)
  if (res.code === 200) {
    //提示，编辑成功
    MessagePlugin.success('删除成功')
    getList()
    deleteVisible.value = false
  } else {
    MessagePlugin.error(res.msg);
  }
}

const cancelDelete = () => {
  deleteVisible.value = false
  deleteData.value = {}
}

const handleDelete = (row) => {
  deleteVisible.value = true
  deleteData.value = row
}

const handleStatus = async (row) => {

  // 如果当前是禁用状态, 需要提交启用状态
  const isOpen = row.status === 0
  const params = {
    id: row.id,
    status: isOpen ? 1 : 0
  }

  if (isOpen) {
    // 启用
    const res = await projectStatus(params)
    if (res.code === 200) {
      //提示，编辑成功
      MessagePlugin.success('操作成功')
      getList()
    } else {
      MessagePlugin.error(res.msg);
    }

  } else {
    // 禁用
   
    forbiddenVisible.value = true
    forbiddenData.value = row
  }
}

const confirmForbidden = async () => {

  const params = {
    id: forbiddenData.value.id,
    status: 0
  }

  const res = await projectStatus(params)
  if (res.code === 200) {
    //提示，编辑成功
    MessagePlugin.success('操作成功')
    getList()
    forbiddenVisible.value = false
  } else {
    MessagePlugin.error(res.msg);
  }
}

// 关闭禁用弹窗
const closeForbidden = () => {
  forbiddenVisible.value = false
}

</script>

<template>
  <div class="min-h serveProject bg-wt">

    <!-- 搜索表单 -->
    <SearchForm :searchData="pagination" @handleSearch="handleSearch" @handleReset="handleReset"
      @handleClear="handleClear">
    </SearchForm>

    <!-- 表格 -->
    <TableList :data="data" :total="total" :pagination="pagination" @onChange="onChange" @handleBulid="handleBulid"
      @handleEdit="handleEdit" @handleDelete="handleDelete" @handleStatus="handleStatus">
    </TableList>

    <!-- 新增/编辑表单 -->
    <DialogForm ref="formRef" :visible="visible" :title="title" :data="formBaseData" @handleClose="handleClose"
      @handleAdd="handleAdd" @handleEdit="handleEditForm">
    </DialogForm>

    <!-- 删除对话框 -->
    <OperateDialog :visible="deleteVisible" delete-text="该护理项目" @handleClose="cancelDelete"
      @handleDelete="onConfirmDelete">
    </OperateDialog>

    <!-- 禁用弹窗 -->
    <Forbidden :visible="forbiddenVisible" @handleClose="closeForbidden" @handleSubmit="confirmForbidden">
    </Forbidden>

  </div>
</template>
